<template>
	<view class="content">
		<HM-dragSorts :list="list1" @onclick="openitem1" @ondelectclick="ondelectclick1" @confirm="confirm1"></HM-dragSorts>
		
		<view style="width:50%;display:flex;margin:20upx 0 20upx 25%;">
			<button type="primary" :disabled="moveButIsDisabled=='' || moveButIsDisabled==1" @tap="listDataUp">上</button>
			<button type="primary" :disabled="moveButIsDisabled=='' || moveButIsDisabled==2" @tap="listDataDown">下</button>
		</view>
		
		<div>
			<HM-dragSorts :list="list2" @onclick="openitem2" @ondelectclick="ondelectclick2" @confirm="confirm2"></HM-dragSorts>
		</div>
		
	</view>
</template>

<script>
	import dragSorts from '@/dragComponents/HM-dragSorts/HM-dragSorts.vue'
	export default {
		components: {
			'HM-dragSorts': dragSorts
		},
		data() {
			return {
				moveButIsDisabled:'', //0禁止 1打开上按钮 2打开下按钮
				/*
					0.数据结构说明 可以在结构中添加其他的数据，比如id,value等，不影响组件使用，拖动调整顺序后，组件会把传入的数据排序后原封不动在@confirm中返回。
					
					1.动态修改list数据，组件会响应变化，但拖动排序不会影响list，
					  所以，要特别注意，在动态修改list数据时候，由于组件内数据可能已经拖动重新排序过，页面的list顺序和组件内数据顺序不一致了，
					  最好在操作list时候，先和@confirm返回的值同步一下，或者直接操作@confirm返回的值，然后赋值给list。
					  
				*/
				list1: [{
						"name": "花呗", //必填，名称
						"icon": "/static/images/dragImg/1.png", //选填，不填则不显示图标
						"select":false
					},
					{
						"name": "余额宝",
						"icon": "/static/images/dragImg/2.png",
						"select":false
					},
					{
						"name": "账户余额",
						"icon": "/static/images/dragImg/3.png",
						"select":false
					}
				],
				list2: [
					{
						"name": "交通银行信用卡(0001)",
						"icon": "/static/images/dragImg/4.png",
						"select":false
					},
					{
						"name": "中国建设银行信用卡(4401)",
						"icon": "/static/images/dragImg/5.png",
						"select":false
					},
					{
						"name": "网商储蓄卡(7223)",
						"icon": "/static/images/dragImg/6.png",
						"select":false
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			listDataDown(){
				this['list1'].forEach((item,index)=>{
					if(item.select){
							item.select = false;
							this.list1.splice(index,1);
							this.list2.push(item);
					}
				})
				this.moveButIsDisabled = '';
			},
			listDataUp(){
				this['list2'].forEach((item,index)=>{
					if(item.select){
							item.select = false;
							this.list2.splice(index,1);
							this.list1.push(item);
					}
				})
				this.moveButIsDisabled = '';
			},
			
			openitem1(e){
				//console.log("e: " + JSON.stringify(e));
				// e.index	被点击的行下标(排序之后的) 
				this.list1.forEach((item,index)=>{
					if(e.index == index){
						item.select = !item.select;
						if(item.select){
							this.moveButIsDisabled = 1
						}else{
							this.moveButIsDisabled = '';
						}
					}else{
						item.select = false;
					}
				})
				// console.log(e.value,'点击了整行1');
				// e.value	被点击的项数据
			},
			confirm1(e) {
				//console.log("e: " + JSON.stringify(e));
				//由上面的打印，显而易见，e里面的list，就是返回来的排序过的数据
			},
			ondelectclick1(e){
				this.list1.splice(e.index,1);
				this.moveButIsDisabled = '';
				console.log(e,'eee');
			},

			
			
			openitem2(e){
				
				this.list2.forEach((item,index)=>{
					if(e.index == index){
						item.select = !item.select;
						if(item.select){
							this.moveButIsDisabled = 2
						}else{
							this.moveButIsDisabled = '';
						}
					}else{
						item.select = false;
					}
				})
				
				//console.log("e: " + JSON.stringify(e));
				// e.index	被点击的行下标(排序之后的) 
				// e.value	被点击的项数据
			},
			confirm2(e) {
				//console.log("e: " + JSON.stringify(e));
				//由上面的打印，显而易见，e里面的list，就是返回来的排序过的数据
			},
			ondelectclick2(e){
				this.list2.splice(e.index,1);
				this.moveButIsDisabled = '';
			}
		}
	}
</script>
<style lang="scss" scoped>
	//scoped css只在当前页生效 不影响子组件
	page {
		background-color: #efeff4;
	}
	@media (prefers-color-scheme: dark){  
	    page {
	    	background-color: #000000;
	    } 
	}
	.content {
		
	}
</style>
